<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        无标题文档
    </title>
    <style>
    body,
    html {
        height: 100%;
    }

    #myTab1_Content1 {
        display: none
    }
    </style>
</head>

<body>
    <script type="text/javascript">
    function nTabs(thisObj, Num) {
        if (thisObj.className == "active") return;
        var tabObj = thisObj.parentNode.id;
        // 思路: 重获取点击的子元素 获取 parentNode.id
        // 遍历点击事件
        var tabList = document.getElementById(tabObj).getElementsByTagName("li");
        for (i = 0; i < tabList.length; i++) {
            if (i == Num) {
                thisObj.className = "active";
                document.getElementById(tabObj + "_Content" + i).style.display = "block";
            } else {
                tabList[i].className = "normal";
                document.getElementById(tabObj + "_Content" + i).style.display = "none";
            }
        }
    }
    </script>
    <div class="nTab">
        <div class="TabTitle">
            <ul id="myTab1">
                <li class="active" id="li_register" onclick="nTabs(this,0);location.href='#register'">
                    注册
                </li>
                <li class="normal" id="li_login" onclick="nTabs(this,1);location.href='#login'">
                    登录
                </li>
            </ul>
        </div>
        <div class="TabContent">
            <div id="myTab1_Content0">
                注册
            </div>
            <div class="none" id="myTab1_Content1">
                登录
            </div>
        </div>
        <script type="text/javascript">
        var hash = location.hash;
        if (hash == "#login") nTabs(document.getElementById('li_login'), 1);
        else nTabs(document.getElementById('li_register'), 0);
        </script>
    </div>
</body>

</html>